{% extends 'myhome/blank.html' %}
{% block con %}
<title>商品列表页</title>
<div id="breadcrumb">
    <div class="container">
        <ul class="breadcrumb">
            <li><a href="{% url 'myhome_index' %}">首页</a></li>
            {% if data.name == data.parent %}
            <li class="active">{{data.name}}</li>
            {% else %}
            <li>{{data.parent}}</li>
            <li class="active">{{data.name}}</li>
            {% endif %}
        </ul>
    </div>
</div>
<div class="section">
    <!-- container -->
    <div class="container">
        <!-- row -->
        <div class="row">
            <!-- ASIDE -->
            <div id="aside" class="col-md-3">
                <div class="aside">
                    <h3 class="aside-title">按价格过滤</h3>
                    <div id="price-slider"></div>
                </div>
                <!-- aside widget -->
                <div class="aside">
                    <h3 class="aside-title">按分类过滤</h3>
                    <h4><a href="#">{{data.parent}}</a></h4>
                    <ul class="list-links">
                        {% for i in data.sub %}
                        <li><a {% if i.name == data.name %} style="color: coral;" {% endif %}
                               href="{% url 'myhome_list' i.id %}">{{i.name}}</a>({{ i.books_set.count }})
                        </li>
                        {% endfor %}
                    </ul>
                </div>
                <!-- /aside widget -->

                <!-- aside widget -->
                <div class="aside">
                    <h3 class="aside-title">最受好评商品</h3>
                    <!-- widget product -->
                    {% for i in datas %}
                    <div class="product product-widget">
                        <div class="product-thumb">
                            <img src="/{{ i.bookimgs_set.first.img_url }}"
                                 style="max-width: 45px; min-width: 40px; max-height: 100px;" alt="">
                        </div>
                        <div class="product-body">
                            <h2 class="product-name"><a href="#">{{i.title}}</a></h2>
                            <h3 class="product-price">￥ {{ i.price }}
                                <del class="product-old-price">￥45.00</del>
                            </h3>
                            <div class="product-rating">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star-o empty"></i>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                    <!-- /widget product -->
                </div>
                <!-- /aside widget -->
            </div>
            <!-- /ASIDE -->

            <!-- MAIN -->
            <div id="main" class="col-md-9">
                <!-- store top filter -->
                <div class="store-filter clearfix">
                    <div class="pull-left">
                        <div class="row-filter">
                            <a href="#"><i class="fa fa-th-large"></i></a>
                            <a href="#" class="active"><i class="fa fa-bars"></i></a>
                        </div>
                        <div class="sort-filter">
                            <span class="text-uppercase">Sort By:</span>
                            <select class="input">
                                <option value="0">Position</option>
                                <option value="0">Price</option>
                                <option value="0">Rating</option>
                            </select>
                            <a href="#" class="main-btn icon-btn"><i class="fa fa-arrow-down"></i></a>
                        </div>
                    </div>
                    <div class="pull-right">
                        <div class="page-filter">
                            <span class="text-uppercase">Show:</span>
                            <select class="input">
                                <option value="0">10</option>
                                <option value="1">20</option>
                                <option value="2">30</option>
                            </select>
                        </div>
                        <ul class="store-pages">
                            <li><span class="text-uppercase">Page:</span></li>
                            <li class="active">1</li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#"><i class="fa fa-caret-right"></i></a></li>
                        </ul>
                    </div>
                </div>
                <!-- /store top filter -->

                <!-- STORE -->
                <div id="store">
                    <!-- row -->
                    <div class="row">
                        {% if data.parent == data.name %}
                        {% for v in data.sub %}
                        {% for vv in v.books_set.all %}
                        <!-- Product Single -->
                        <div class="col-md-4 col-sm-6 col-xs-6">
                            <div class="product product-single">
                                <div class="product-thumb">
                                    <div class="product-label">
                                        <span>New</span>
                                    </div>
                                    <button class="main-btn quick-view"><a
                                            href="{% url 'myhome_detail' vv.id %}">快速预览</a></button>
                                    <img src="/{{vv.bookimgs_set.first.img_url }}"
                                         style="max-width: 190px; max-height: 300px;" alt="">
                                </div>
                                <div class="product-body">
                                    <h3 class="product-price">￥{{vv.price}}
                                        <del class="product-old-price">￥45.00</del>
                                    </h3>
                                    <div class="product-rating">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star-o empty"></i>
                                    </div>
                                    <h2 class="product-name"><a href="#">{{ vv.title }}</a></h2>
                                    <div class="product-btns">
                                        <button class="main-btn icon-btn"><i class="fa fa-heart"></i></button>
                                        <button class="main-btn icon-btn"><i class="fa fa-exchange"></i></button>
                                        <button class="primary-btn add-to-cart"><i class="fa fa-shopping-cart"></i> 加入购物车</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /Product Single -->
                        {% endfor %}
                        {% endfor %}
                        {% else %}
                        {% for vv in data.books_set.all %}
                        <!-- Product Single -->
                        <div class="col-md-4 col-sm-6 col-xs-6">
                            <div class="product product-single">
                                <div class="product-thumb">
                                    <div class="product-label">
                                        <span>New</span>
                                    </div>
                                    <button class="main-btn quick-view"><a
                                            href="{% url 'myhome_detail' vv.id %}">快速预览</a></button>
                                    <img src="/{{vv.bookimgs_set.first.img_url }}"
                                         style="max-width: 190px; max-height: 300px;" alt="">
                                </div>
                                <div class="product-body">
                                    <h3 class="product-price">￥{{vv.price}}
                                        <del class="product-old-price">￥45.00</del>
                                    </h3>
                                    <div class="product-rating">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star-o empty"></i>
                                    </div>
                                    <h2 class="product-name"><a href="#">{{ vv.title }}</a></h2>
                                    <div class="product-btns">
                                        <button class="main-btn icon-btn"><i class="fa fa-heart"></i></button>
                                        <button class="main-btn icon-btn"><i class="fa fa-exchange"></i></button>
                                        <button class="primary-btn add-to-cart"><i class="fa fa-shopping-cart"></i> 加入购物车</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /Product Single -->
                        {% endfor %}
                        {% endif %}
                        <div class="clearfix visible-sm visible-xs"></div>
                        <!-- /Product Single -->
                    </div>
                    <!-- /row -->
                </div>
                <!-- /STORE -->

                <!-- store bottom filter -->
                <div class="store-filter clearfix">
                    <div class="pull-left">
                        <div class="row-filter">
                            <a href="#"><i class="fa fa-th-large"></i></a>
                            <a href="#" class="active"><i class="fa fa-bars"></i></a>
                        </div>
                        <div class="sort-filter">
                            <span class="text-uppercase">Sort By:</span>
                            <select class="input">
                                <option value="0">Position</option>
                                <option value="0">Price</option>
                                <option value="0">Rating</option>
                            </select>
                            <a href="#" class="main-btn icon-btn"><i class="fa fa-arrow-down"></i></a>
                        </div>
                    </div>
                    <div class="pull-right">
                        <div class="page-filter">
                            <span class="text-uppercase">Show:</span>
                            <select class="input">
                                <option value="0">10</option>
                                <option value="1">20</option>
                                <option value="2">30</option>
                            </select>
                        </div>
                        <ul class="store-pages">
                            <li><span class="text-uppercase">Page:</span></li>
                            <li class="active">1</li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#"><i class="fa fa-caret-right"></i></a></li>
                        </ul>
                    </div>
                </div>
                <!-- /store bottom filter -->
            </div>
            <!-- /MAIN -->
        </div>
        <!-- /row -->
    </div>
    <!-- /container -->
</div>

{% endblock %}